<template>
  <view id="pcontent">
    <u-navbar leftIconColor="#fff" :autoBack="true" bgColor="#00c7db" :titleStyle="titlStyle" title="商品详情">
    </u-navbar>
    <view class="p_content">
      <view class="p_info">
        <u--image height="18rem" width="100%" :src="list.img" mode="aspectFit"></u--image>
        <h2>{{ list.name }}</h2>
        <p class="price">{{ list.pic }}/份</p>
      </view>
      <view class="p_detial">
        <h3>商品详情</h3>
        <view class="p_content" v-html="list.content"> </view>
      </view>
    </view>

    <footer class="pfooter">
      <view class="cart">
        <strong>数量:</strong>
        <view class="cart_num">
          <view class="input_left" @click="decNum()">-</view>
          <view class="input_center">
            <input type="text" readonly="readonly" v-model="num" name="num" id="num" />
          </view>
          <view class="input_right" @click="incNum()">+</view>
        </view>
      </view>

      <button class="addcart" @click="addCart()">加入购物车</button>
    </footer>
  </view>
</template>


<script>
//引入config
import { getGood, postGoodsCartAdd, showToast } from "@/common/api.js";
export default {
  data() {
    return {
      titlStyle: {
        color: "#ffffff",
      },
      // api: Config.api,
      list: {},
      num: 1,
      id: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    if (this.id) {
      this.requestData(this.id);
    } else {
      showToast("页面错误");
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
    // 页面启动的生命周期，这里编写页面加载时的逻辑
  },
  methods: {
    async requestData(id) {
      let res = await getGood({ _id: id });
      if (res.data) {
        this.list = res.data;
      }

    },
    decNum() {
      if (this.num > 1) {
        --this.num;
      }
    },
    incNum() {
      ++this.num;
    },
    async addCart() {
      let params = {
        uid: uni.getStorageSync('roomid'), // 桌子号
        title: this.list.name, // 菜品名称
        goods_id: this.list._id, // 当前商品 id 必传
        img: this.list.img, // 菜品图片
        pic: this.list.pic, // 菜品价格
        num: this.num, // 商品数量
      };
      let res = await postGoodsCartAdd(params);
      if (res.code == 200) {
        this.$socket.emit("addcart", {
          time: +new Date(),
        });
        uni.navigateBack();
      }
    },
  },
};
</script>

<style lang="scss">
.p_content {
  margin: 80rpx 0 0 0;

  .p_info {
    background: #fff;
    h2 {
      padding: 0.2rem 0.5rem;
    }

    .price {
      padding: 0.2rem 0.5rem;

      color: red;
    }
  }

  .p_detial {
    background: #fff;

    margin-top: 1rem;

    h3 {
      padding: 0.5rem;
    }

    .p_content {
      padding: 1rem;

      img {
        max-width: 100%;

        display: block;

        margin: 0 auto;
      }

      * {
        line-height: 1.5;

        color: #666;
      }
    }
  }
}

/*底部*/

.pfooter {
  position: fixed;

  bottom: 0px;
  height: 4.4rem;
  line-height: 4.4rem;

  background: #fff;

  left: 0px;

  width: 100%;

  border-top: 1px solid #eee;

  .cart {
    float: left;

    display: flex;

    strong {
      flex: 1;

      font-size: 1.6rem;

      padding: 0rem 0.5rem;
    }

    .cart_num {
      width: 10rem;

      display: flex;
      margin-top: 0.8rem;

      .input_left,
      .input_right {
        flex: 1;

        width: 2.8rem;
        height: 2.8rem;

        line-height: 2.8rem;

        text-align: center;

        color: red;

        border: 1px solid #eee;

        font-size: 2.4rem;
      }

      .input_center {
        flex: 1;

        input {
          width: 2rem;
          text-align: center;
          width: 100%;
          height: 2.8rem;
          border: none;

          border-top: 1px solid #eee;

          border-bottom: 1px solid #eee;

          float: left;
        }
      }
    }
  }

  .addcart {
    float: right;

    background: #00c7db;
    color: #fff;
    height: 3rem;
    border: none;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    margin-top: 0.8rem;
    margin-right: 0.5rem;

    a {
      color: #fff;
    }
  }
}
</style>